<template>
	<view class="container">
		<!-- 空状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/个人头像.png'"></image>
				<view class="user-details">
					<text class="title">维修工作台</text>
					<view class="role-info">
						<text class="role-icon">👷‍♂️</text>
						<text class="role-name">维修人员</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 今日任务统计 -->
		<view class="stats-section">
			<view class="section-title">
				<text class="title-text">今日任务</text>
				<text class="title-sub">Today's Tasks</text>
			</view>
			<view class="stats-grid">
				<view class="stat-item">
					<view class="stat-icon urgent">🚨</view>
					<text class="stat-number">3</text>
					<text class="stat-label">紧急任务</text>
				</view>
				<view class="stat-item">
					<view class="stat-icon normal">🔧</view>
					<text class="stat-number">8</text>
					<text class="stat-label">普通任务</text>
				</view>
				<view class="stat-item">
					<view class="stat-icon completed">✅</view>
					<text class="stat-number">5</text>
					<text class="stat-label">已完成</text>
				</view>
			</view>
		</view>
		
		<!-- 我的任务列表 -->
		<view class="tasks-section">
			<view class="section-title">
				<text class="title-text">我的任务</text>
				<text class="title-sub">My Tasks</text>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="task in myTasks" :key="task.id" @click="viewTaskDetail(task)">
					<view class="task-priority" :class="task.priority"></view>
					<view class="task-content">
						<text class="task-title">{{ task.title }}</text>
						<text class="task-desc">{{ task.description }}</text>
						<view class="task-meta">
							<text class="task-location">📍 {{ task.location }}</text>
							<text class="task-time">⏰ {{ task.deadline }}</text>
						</view>
					</view>
					<view class="task-status" :class="task.status">
						<text class="status-text">{{ getStatusText(task.status) }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 快速操作 -->
		<view class="quick-actions">
			<view class="section-title">
				<text class="title-text">快速操作</text>
				<text class="title-sub">Quick Actions</text>
			</view>
			<view class="action-grid">
				<view class="action-item" @click="startNewTask">
					<view class="action-icon">➕</view>
					<text class="action-text">开始新任务</text>
				</view>
				<view class="action-item" @click="reportProgress">
					<view class="action-icon">📊</view>
					<text class="action-text">汇报进度</text>
				</view>
				<view class="action-item" @click="requestParts">
					<view class="action-icon">🔧</view>
					<text class="action-text">申请备件</text>
				</view>
				<view class="action-item" @click="viewSchedule">
					<view class="action-icon">📅</view>
					<text class="action-text">查看排班</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permissionManager from '@/utils/permission.js'
	
	export default {
		data() {
			return {
				userInfo: {},
				myTasks: [
					{
						id: 1,
						title: 'CO2设备维修',
						description: '设备CO2维修完成技术地方就是老杜...',
						location: '车间A-01',
						deadline: '今天 14:00',
						priority: 'urgent',
						status: 'in-progress'
					},
					{
						id: 2,
						title: '传送带检修',
						description: '定期维护传送带系统',
						location: '车间B-02',
						deadline: '明天 09:00',
						priority: 'normal',
						status: 'pending'
					},
					{
						id: 3,
						title: '电机更换',
						description: '更换老化电机设备',
						location: '车间C-03',
						deadline: '后天 16:00',
						priority: 'normal',
						status: 'completed'
					}
				]
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				const { getUserInfo } = require('@/utils/auth');
				const userInfo = getUserInfo();
				if (userInfo) {
					this.userInfo = userInfo;
					permissionManager.setUserInfo(userInfo);
				}
			},
			
			// 获取头部样式
			getHeaderStyle() {
				const themeStyles = permissionManager.getThemeStyles();
				return {
					'background': `linear-gradient(135deg, ${themeStyles['--primary-color']}, ${themeStyles['--secondary-color']})`
				};
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待处理',
					'in-progress': '进行中',
					'completed': '已完成',
					'cancelled': '已取消'
				};
				return statusMap[status] || '未知';
			},
			
			// 查看任务详情
			viewTaskDetail(task) {
				uni.navigateTo({
					url: `/pages/worker/task-detail?id=${task.id}`
				});
			},
			
			// 开始新任务
			startNewTask() {
				uni.navigateTo({
					url: '/pages/repair/fault-report'
				});
			},
			
			// 汇报进度
			reportProgress() {
				uni.showToast({
					title: '汇报进度功能开发中',
					icon: 'none'
				});
			},
			
			// 申请备件
			requestParts() {
				uni.navigateTo({
					url: '/pages/spare-parts/index'
				});
			},
			
			// 查看排班
			viewSchedule() {
				uni.showToast({
					title: '排班功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		background-color: #67C23A;
	}
	
	/* 头部区域 */
	.header {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		background: linear-gradient(135deg, #67C23A, #409EFF);
	}
	
	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}
	
	.user-details {
		flex: 1;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.role-info {
		display: flex;
		align-items: center;
	}
	
	.role-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}
	
	.role-name {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	/* 统计区域 */
	.stats-section {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.section-title {
		margin-bottom: 30rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.title-sub {
		font-size: 24rpx;
		color: #999;
	}
	
	.stats-grid {
		display: flex;
		justify-content: space-between;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
	}
	
	.stat-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin: 0 auto 16rpx;
	}
	
	.stat-icon.urgent {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
	
	.stat-icon.normal {
		background-color: #F0F9FF;
		color: #409EFF;
	}
	
	.stat-icon.completed {
		background-color: #F0F9FF;
		color: #67C23A;
	}
	
	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 任务列表 */
	.tasks-section {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.task-list {
		margin-top: 20rpx;
	}
	
	.task-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.task-item:last-child {
		border-bottom: none;
	}
	
	.task-priority {
		width: 8rpx;
		height: 60rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	
	.task-priority.urgent {
		background-color: #F56C6C;
	}
	
	.task-priority.normal {
		background-color: #409EFF;
	}
	
	.task-content {
		flex: 1;
	}
	
	.task-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.task-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 12rpx;
	}
	
	.task-meta {
		display: flex;
		gap: 20rpx;
	}
	
	.task-location,
	.task-time {
		font-size: 22rpx;
		color: #999;
	}
	
	.task-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}
	
	.task-status.pending {
		background-color: #F0F9FF;
		color: #409EFF;
	}
	
	.task-status.in-progress {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
	
	.task-status.completed {
		background-color: #F0F9FF;
		color: #67C23A;
	}
	
	/* 快速操作 */
	.quick-actions {
		margin: 20rpx 30rpx 100rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.action-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		border: 2rpx solid #e9ecef;
	}
	
	.action-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
</style>
